<template>
  <div class="cs-p">
    <el-tabs v-model="tabIndex" @tab-click="handleTab">
      <el-tab-pane v-for="(item, index) in tabList" :key="item.name" :label="item.title" :name="item.name">
        <el-table
          :data="item.data"
          @selection-change="handleSelectionChange">
          <el-table-column align="center" type="selection" width="55"/>

        <el-table-column label="店铺名称" prop="name"></el-table-column>
        <el-table-column label="店铺简称" prop="short_name"></el-table-column>
        <el-table-column label="店主姓名" prop="contact_name"></el-table-column>
        <el-table-column label="店主手机号码" prop="contact_mobile"></el-table-column>
        <el-table-column label="审核状态" align="center">
          <template slot-scope="scope">
            <div class="order-text">
              <p
                v-for="(item, index) in getReviewStatus(scope.row)"
                :key="index"
                class="order-button">{{item}}</p>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center">
          <template slot-scope="scope">
            <div class="order-text" v-if="scope.row.review_status===0 || scope.row.review_status===2">
              <p>
                <el-link
                  class="order-button"
                  type="success"
                  @click="reviewShop(scope.row.shop_id)"
                  :underline="false">审核</el-link>
              </p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getSettingList } from '@/api/config/setting'

export default {
  props: {
    loading: {
      default: false
    },
    tabActive: {
      default: 0
    },
    tableData: {
      default: () => []
    }
  },
  data() {
    return {
      tabIndex: 0,
      tabList: [
        {
          title: '全部',
          name: '0',
          data: []
        }, {
          title: '待审核',
          name: '1',
          data: []
        },
        {
          title: '已审核',
          name: '2',
          data: []
        }, {
          title: '驳回',
          name: '3',
          data: []
        },
        {
          title: '已拒绝',
          name: '4',
          data: []
        }
      ],
    }
  },
  watch: {
    tableData: {
      handler(val) {
        this.currentTableData = val
        for(var i=0; i<this.tabList.length; i++) {
          if(parseInt(this.tabList[i].name) === parseInt(this.tabActive)) {
            this.tabList[i].data = this.currentTableData
          }
        }
        this.multipleSelection = []
      },
      immediate: true
    }
  },
  methods: {
    // 数字化标签名称
    getTabPaneName(key, value) {
      if (!Object.prototype.hasOwnProperty.call(this.totalMap, key)) {
        return value
      }
      return value
    },
    // 选中数据项
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 订单详情
    handleInfo(order_no) {
      this.$router.push({
        name: 'order-admin-info',
        params: { order_no }
      })
    },
    // 获取商家审核状态
    getReviewStatus(data) {
      let result = []
      //0=未处理 1=待补充信息(驳回) 2=审核中 3=已审核 4=已拒绝
      switch (data.review_status) {
        // 待处理
        case 0:
          result.push('未处理')
          break
        // 配货中
        case 1:
          result.push('驳回')
          break
        // 已发货
        case 2:
          result.push('审核中')
          break
        // 已完成
        case 3:
          result.push('已审核')
          break
        case 4:
          result.push('已拒绝')
          break
      }

      return result
    },
    handleTab(tab, event) {
      this.$emit('tabs',tab.name)
    },
    reviewShop(shop_id) {
      this.$router.push('/merchant/admin/review/' + shop_id)
    }
  }
}
</script>

<style lang="scss" scoped>
  .tab-box {
    padding: 5px 10px;
    background-color: #FFF;
  }

  .el-table /deep/ td {
    background-color: #FFFFFF !important;
  }

  .order-summary {
    color: $color-text-placehoder;
    font-size: 13px;
  }

  .order-text {
    p {
      margin: 0;
    }

    .son {
      color: $color-text-sub;
      font-size: 13px;
    }
  }

  .order-goods-list {
    float: left;

    .goods-image {
      float: left;
      width: 80px;
      height: 80px;
    }

    .goods-image-small {
      float: left;
      width: 60px;
      height: 60px;
    }

    .goods-info {
      padding: 0 50px 0 100px;
      min-width: 405px;

      .goods-name {
        height: 36px;
        line-height: 18px;
        overflow: hidden;
      }

      .link {
        &:hover {
          cursor: pointer;
          color: $color-primary;
          text-decoration: underline;
        }
      }

      .service {
        font-size: 13px;
        color: $color-warning;
      }

      .complete {
        font-size: 13px;
        color: $color-success;
      }
    }
  }

  .shop-price {
    color: $color-danger;
  }

  .level-icon {
    margin-left: 5px;
    line-height: 0;
    vertical-align: text-bottom;
  }

  .order-button {
    padding: 0;
    font-size: 13px;
  }
</style>
